<template>
  <qx-table :option="tableOption" :remoteData="remoteData">
    <template v-slot:menu="{ row }">
      <q-btn class="col-full-width" color="primary" outline unelevated @click="handlePreview(row)">
        {{ $t('MapCore.TargetMapView') }}
      </q-btn>
      <q-btn class="col" color="primary" icon="mdi-format-list-text" outline unelevated @click="handleCfg(row)">
        {{ $t('Misc.Config') }}
      </q-btn>
      <q-btn class="col" color="primary" icon="mdi-window-close" outline unelevated @click="handleDelete(row)">
        {{ $t('Empty') }}
      </q-btn>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" v-model:loading="loading" :header="$t('MapCore.TargetMapView')" :menuBtn="false"
           :persistent="false" fullHeight fullWidth>
    <IndexMonitoring :assignedMap="rowInfo" nonHeader nonMaps></IndexMonitoring>
  </q-modal>
  <qx-page v-model="pageVisible" :header="header" :menuBtn="false" fullHeight @beforeClose="beforeClose">
    <MapDataConvInfo v-model="pageVisible" v-model:isRefresh="isRefresh" :rowInfo="rowInfo"></MapDataConvInfo>
  </qx-page>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import { deleteAPI } from 'src/api/index.js'
import IndexMonitoring from 'src/views/MapCore/IndexMonitoring.vue'
import MapDataConvInfo from 'src/views/MonitorCore/MapDataConvInfo.vue'
import { computed, onMounted, ref } from 'vue'
import { createDialog } from 'src/utils/utils.js'

const rowInfo = ref({})
const searchForm = ref({})
const loading = ref(false)
const isRefresh = ref(false)
const pageVisible = ref(false)
const modalVisible = ref(false)
const remoteData = ref({ dicUrl: '/tpm/yfagv/api/agvMonitor/mapMonitorConverCfgList' })
const header = computed(() => `${i18n.t('MapCore.MapDataConv')}(${rowInfo.value.mapName})`)
const tableOption = computed(() => {
  return {
    grid: true, span: 22, labelWidth: 100, searchSpan: 4, headerWidth: 80, page: false,
    column: [{
      label: `${i18n.t('MapCore.TargetMap')}`, field: 'mapName', minWidth: 100
    }, {
      label: `${i18n.t('MapCore.GroundCodeType')}`, field: 'mapGroundCode', minWidth: 100, topLeft: true
    }, {
      label: `${i18n.t('Misc.ConvCfgCount')}`, field: 'converCfgCnt', minWidth: 100
    }]
  }
})

const handlePreview = ({ mapGroundCode, mapName }) => {
  rowInfo.value = { mapGroundCode, mapName }
  modalVisible.value = true
}
const handleCfg = row => {
  rowInfo.value = row
  pageVisible.value = true
}
const handleDelete = row => {
  createDialog({ msg: `${i18n.t('Misc.ClearConfigTips')}` }, () => {
    deleteAPI(`/tpm/yfagv/api/newMapMonitorConverCfg/newMapId/${row.newMapId}`, {}, () => startSearch('clear'))
  }, () => {})
}
const beforeClose = () => {
  pageVisible.value = false
  if (isRefresh.value) startSearch()
  isRefresh.value = false
}
const formatSearchForm = () => ({ ...searchForm.value })
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}
onMounted(startSearch)
</script>